<template>
  <div class="pay">
    <el-main>
      <ul>
        <li v-for="sp in shangpin" :key="sp">{{sp}}</li>
      </ul>
      <ul id="ul2">
        <li v-for="(v,k) in allTrade" :key="k" id="li2" :value="v.cartID">
          <div>
            <li><img :src="getCard(v.cpic)" alt=""></li>
            <li><span>{{v.cname}}</span></li>
            <li><span>￥{{v.newmoney}}</span></li>
            <li><span>{{v.num}}</span></li>
            <li><span>{{v.sum}}</span></li>
          </div>
        </li>
      </ul>
      <hr />
      <h2>个人信息</h2>
      <ul id="ul1">
        <li v-for="user in users" :key="user" id="li1" >
          {{user.userName}}
          {{user.telephone}}
          {{user.address}}
        </li>
      </ul>
       <el-button type="success" @click="ok">确认下单</el-button>
    </el-main>
  </div>
</template>
<style scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 50px;
}
ul {
  width: 80%;
  height: 50px;
  margin: 0 auto;
}
li {
  width: 16%;
  /* height: 50px; */
  list-style: none;
  float: left;
}
#ul1{
  width:120px;
  height: 150px;
  margin:  0 auto;
  margin-top: 30px;
}
#li1{
  width: 100%;
  clear: both;
}
h3{
  color: #333;
  text-align: center;
}
#ul2{
  width: 80%;
  margin: 0 auto
}
#li2{
  width: 100%;
}
img{
  width: 60px;
  height: 60px;
  text-align: left
}
</style>
<script>
export default {
  data() {
    return {
      cartID:[],
      moneys:[],
      allTrade: [],
      shangpin: ["商品", "商品名称", "商品单价", "商品数量","总价"],
      users: []
    };
  },
  created() {
     this.cartID = this.$route.query.id;
     this.moneys = this.$route.query.moneys;
      var cartID = this.cartID.toString();
     console.log('cart',cartID)
     console.log('mon',this.moneys)
   
    this.$axios.get("http://localhost:3000/order/getTrade?cartID="+this.cartID )
    .then(res => {
    
      this.allTrade = res.data.data
    })
    .catch(err => {
      console.log("购物车查询失败",err)
    })
    this.$axios.get("http://localhost:3000/users/user")
    .then(res => {
      console.log("查询结果是：");
      console.log(res.data.data);
      this.users=res.data.data
      // console.log(user.userName);
    })
    .catch(err => {
      console.log("错误信息"+err)
    })
  },
  methods:{
    getCard(card) {
      let path = "http://localhost:3000/upload/" + card;
     
      console.log(path);
      return path;
    },
    ok(){
      window.location.href = "http://localhost:3000/pay?id="+this.moneys; 
    }
  }
};
</script>
